// 封装分类数据业务相关代码

import { getCategoryAPI } from "@/apis/category";
import { onMounted, ref } from "vue";
// 获取路由参数
import { useRoute, onBeforeRouteUpdate } from "vue-router";

export function useCategory() {

  //获取分类数据
  const categoryData = ref({});
  const router = useRoute();

  const getCategory = async (categoryId = router.params.id) => {
    //console.log(categoryId);
    // router.params.id -- 需要根据定义来获取，这里是get请求参数 所以是 params，若是 路径参数是 path
    return await getCategoryAPI(categoryId);
  };
  onMounted(() => {
    getCategory().then((res) => {
      //console.log(res);
      categoryData.value = res.result;
    });
  });

  // 目标： 期望路由参数变化的时候，可以把分类数据接口重新发送。
  onBeforeRouteUpdate((to) => {
    // 存在为题：我们需要使用新的路由参数来发送请求，但是getCategory()方法中使用的使旧的？怎末办！
    // onBeforeRouteUpdate：提供了一个参数 to ，这个参数就是最新的路由信息
    //console.log(to);
    getCategory(to.params.id).then((res) => {
      //console.log(res);
      categoryData.value = res.result;
    });
  });

  return {
    categoryData,
  };
}
